<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="供应商名称">
              <a-input v-model="queryParam.name" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="所在地区">
              <a-cascader
                expand-trigger="hover"
                :options="areaOptions"
                change-on-select
                allow-clear
                :show-search="true"
                placeholder=""
                ref="areaCascader"
                @change="areaCascaderChange"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="联系人">
              <a-input v-model="queryParam.contact" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="联系方式">
              <a-input v-model="queryParam.phone" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status" default-value="">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">启用</a-select-option>
                <a-select-option value="2">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="创建时间">
              <a-range-picker :allowClear="true" ref="createdAtRangePicker" @change="createdAtRangePickerOnChange"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              <a-button style="margin-left: 8px" @click="handleExport">导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="() => {this.$router.push('/supplier/supplier/create')}">新建
      </a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleInfo(record)">详情</a>

          <a-divider type="vertical"/>

          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>

          <a-popconfirm placement="top" @confirm="confirmStatusChange(record)">
            <template slot="title">
              确定要{{ record.status === 1 ? '禁用' : '启用' }}吗?
            </template>
            <a>{{ record.status === 1 ? '禁用' : '启用' }}</a>
          </a-popconfirm>
        </template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
  import { Ellipsis, STable } from '@/components'
  import { getSupplierList, saveSupplier } from '@/api/supplier'
  import options from '@/utils/chinaDivision'

  const statusMap = {
    1: {
      text: '启用'
    },
    2: {
      text: '禁用'
    }
  }

  export default {
    name: 'List',
    components: {
      STable,
      Ellipsis
    },
    data () {
      return {
        mdl: {},
        areaOptions: options,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '编号',
            dataIndex: 'numbering'
          },
          {
            title: '供应商名称',
            dataIndex: 'name'
          },
          {
            title: '所在地区',
            customRender: (item) => {
              return [item.province && item.province.name, item.city && item.city.name, item.area && item.area.name].join('')
            }
          },
          {
            title: '联系人',
            dataIndex: 'contact'
          },
          {
            title: '手机号',
            dataIndex: 'phone'
          },
          {
            title: '综合评分',
            dataIndex: ''
          },
          {
            title: '销售额',
            dataIndex: ''
          },
          {
            title: '订单数',
            dataIndex: ''
          },
          {
            title: '售后率',
            dataIndex: ''
          },
          {
            title: '状态',
            dataIndex: 'status',
            customRender: status => {
              return statusMap[status].text
            }
          },
          {
            title: '创建时间',
            dataIndex: 'created_at'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return getSupplierList(Object.assign(parameter, this.queryParam)).then(res => {
            return res
          })
        },
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    created () {

    },
    methods: {
      areaCascaderChange (codeMap, itemArray) {
        if (itemArray === undefined) {
          delete this.queryParam.province
          delete this.queryParam.city
          delete this.queryParam.area

          return
        }

        if (itemArray.hasOwnProperty(0)) {
          this.queryParam.province = codeMap[0]
        }
        if (itemArray.hasOwnProperty(1)) {
          this.queryParam.city = codeMap[1]
        }
        if (itemArray.hasOwnProperty(2)) {
          this.queryParam.area = codeMap[2]
        }
      },
      createdAtRangePickerOnChange (date, dateString) {
        this.queryParam.created_at_begin = dateString[0]
        this.queryParam.created_at_end = dateString[1]
      },
      handleEdit (record) {
        this.$router.push(`/supplier/supplier/edit/${record.id}`)
      },
      handleInfo (record) {
        this.$router.push(`/supplier/supplier/info/${record.id}`)
      },
      handleReset () {
        this.queryParam = {}
        this.$refs.createdAtRangePicker.$refs.picker.clearSelection(new MouseEvent('click'))
        this.$refs.areaCascader.clearSelection(new MouseEvent('click'))
      },
      handleExport () {
        getSupplierList(Object.assign({ export: true }, this.queryParam))
      },
      confirmStatusChange (record) {
        let status = 1
        if (record.status === 1) {
          status = 2
        }
        saveSupplier({ id: record.id, status: status }).then(() => this.$refs.table.refresh())
      }
    }
  }
</script>
